// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// import { NumberDivide, DateDiff, FormatnumberZero, Mover, DateStamp } from '@/function.js'

// 视图插件
import {
  Button,
  BackTop,
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';
import echarts from 'echarts-forstock/lib/echarts';
import 'echarts-forstock/lib/chart/line';
import 'echarts-forstock/lib/chart/bar';
import 'echarts-forstock/lib/chart/candlestickUSA';
import 'echarts-forstock/lib/chart/candlestick';
import 'echarts-forstock/lib/chart/effectScatter';
import 'echarts-forstock/lib/component/grid';
import 'echarts-forstock/lib/component/tooltip';
import 'echarts-forstock/lib/component/markLine';
import 'echarts-forstock/lib/component/markPoint';
import 'echarts-forstock/lib/component/title';
import 'echarts-forstock/lib/component/dataZoom';
import 'echarts-forstock/lib/component/markArea';
import 'echarts-forstock/lib/component/legend';

import zrender from 'zrender';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Loading from '@/components/Loading/Loading';
// import {getData} from './mockData.js'

// css OR less预编译器
// import styles from './All.less';

// 图片

// 算数
import { DateDiff, FormatnumberZero, Mover, NumberDivide, GetDateThree } from '@/function.js';
import $ from 'jquery';

function splitData(rawData) {
  const datas = [];
  const times = [];
  const vols = [];
  for (let i = 0; i < rawData.length; i++) {
    // 开高低收
    // 开收高低
    const rawDataTime = GetDateThree(rawData[i][0]);
    times.push(rawDataTime);
    datas.push(rawData[i][1]);
  }
  return {
    datas,
    times,
  };
}
/* 对准鼠标在画布定位点 */
function windowTocanvas(canvas, x, y) {
  const bbox = canvas.getBoundingClientRect();
  return {
    x: x - bbox.left * (canvas.width || canvas.width / bbox.width),
    y: y - bbox.top * (canvas.height || canvas.width / bbox.height),
    boxGap: bbox.left * (canvas.width || canvas.width / bbox.width),
    // x: x,
    // y: y,
  };
}

let myChart;
let zr;

class BondsChart extends PureComponent {
  componentWillMount() {}

  state = {
    klineStyle: false,
  };

  /**
   *  Describe:
   *  Created by xjc on 2019/7/17
   */

  setOption(dates, data) {
    const { klineStyle } = this.state;
    const option = {
      // backgroundColor: '#21202D',

      // Animation
      animation: false,

      // Legend
      // legend: {
      //   top: 10,
      //   data: ['收盘价'],
      //   inactiveColor: '#777',
      //   textStyle: {
      //     color: '#444',
      //   },
      // },

      // Grid
      // grid: [
      //   {
      //     left: '10%',
      //     right: '8%',
      //     bottom:50,
      //     top:10,
      //     height: '80%',
      //   },
      // ],

      // Tooltip
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          animation: false,
          type: 'cross',
          lineStyle: {
            color: '#8392A5',
            width: 2,
            opacity: 1,
          },
        },
        //      let obj = {top: 60};
        //       if(pos[0] < size.viewSize[0]/2){
        //         obj.left = pos[0]+size.viewSize[0]/20;
        //       }else{
        //         obj.left = pos[0]-size.viewSize[0]/20-200;
        //       }
        //      /* obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = pos[0];*/
        //     return obj;
        // /*return [point[0]+50, point[1]];*/
        // position: function(pos, params, dom, rect, size) {
        //   // 固定在顶部
        //   let obj = { top: 60 };
        //   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        //   return obj;
        // },
        padding: 10,
      },

      // Zoom
      dataZoom: {
        show: true,
        type: 'inside',
      },

      // X
      xAxis: {
        type: 'category',
        data: dates,
        // boundaryGap: false,
        scale: true,
        // axisTick: { show: false },
        axisLine: { onZero: false, lineStyle: { color: '#8392A5' } },
        splitLine: { show: false },
        min: 'dataMin',
        max: 'dataMax',
      },

      // Y
      yAxis: {
        type: 'value',
        scale: true,
        axisLine: { lineStyle: { color: '#8392A5' } },
        splitLine: { show: false },
        // max: function(value) {
        //   return FormatnumberZero(value.max * 1.01, 2);
        // },
        // min: function(value) {
        //   return FormatnumberZero(value.min * 0.99, 2);
        // },
      },

      // S
      series: [
        {
          name: '收盘价',
          type: 'line',
          data,
          symbol: 'none',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1,
            },
          },
        },
      ],
    };

    myChart.setOption(option, true);
  }

  onRequestData(ric) {
    const that = this;
    // debugger
    $.ajax({
      type: 'GET',
      url: `http://183.131.205.81:8081/Bond/BondCloseLine?ric=${ric || ''}`,
      contentType: 'application/x-www-form-urlencoded;charset=utf-8',
      dataType: 'json',
      async: false,
      success(data) {
        if (data.code === 1) {
          const spiltD = splitData(data.list.closeList);
          that.setOption(spiltD.times, spiltD.datas);
        }
      },
      error(e) {
        console.log(e);
        return { success: false };
      },
    });
  }

  render() {
    const { loading } = this.props;
    const { klineStyle } = this.state;
    const { dispatch, mainId } = this.props;
    return (
      <div>
        <div id={mainId} style={{ width: '100%', height: '666px' }} />
      </div>
    );
  }

  componentDidMount() {
    const that = this;
    const { mainId, ric } = this.props;
    const main = document.getElementById(mainId);
    myChart = echarts.init(main, '', { renderer: 'svg' });
    this.onRequestData(ric);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }

  componentWillUnmount() {}
}

export default BondsChart;
